<template>
	<view class="bigBox">
		<u-navbar :fixed="false" :placeholder="true" title="随手拍" @leftClick="leftClick" bgColor="#0F53AC"
			leftIconColor="#fff">
		</u-navbar>
		<view class="kiss-list">
			<view class="kiss-list-title2">
				<view class="left">
					<view class="yz" v-if="isInspec == 0">*</view>
					隐患位置
				</view>
				<view class="right1" v-if="isInspec == 0" @click="handleUnit()">
					<view class="iconfont icon-app-add sm-sd">请选择</view>
				</view>
			</view>
			<view class="kiss-list-input">
				<view class="my-input">
					<u-input border="surround" cursorSpacing="60" :autoHeight="true" placeholder="请输入隐患位置"
						v-model="dataForm.dangerSite" inputAlign="left" maxlength="32">
						<template slot="suffix">
							<div class="myLength">{{dangerSiteLength}}/32</div>
						</template>
					</u-input>
				</view>
			</view>
		</view>
		<view class="kiss-title">
			<view class="left">
				<view class="yz" v-if="isInspec == 0">*</view>
				隐患照片<view v-if="isInspec == 0" class="tips">(可传3张)</view>
			</view>
		</view>
		<view class="kiss-upload">
			<uploadVideo :fileMaxNum="3" @getdata="getdata" :fileType="24" @delete="deletePicture" :file="file">
			</uploadVideo>
		</view>
		<view class="kiss-upDown-list">
			<view class="bx-list-title">
				<view class="left">
					<view class="yz" v-if="isInspec == 0">*</view>
					隐患描述
				</view>
			</view>
			<view class="input-textrea" v-if="isInspec == 0">
				<u--textarea class="textrea" v-model="dataForm.dangerDesc" placeholder="请输入隐患描述" maxlength="360">
				</u--textarea>
			</view>
			<view class="textInput" v-else>{{dataForm.dangerDesc || '无'}}</view>
		</view>
		<!-- <view class="kiss-list">
			<view class="kiss-list-title" @click="showReason = true">
				<view class="left">
					隐患形成原因
				</view>
				<view class="right1" v-if="isInspec == 0">
					<view :class="[dataForm.dangerReason != '' ? 'select-bg' : '']">
						{{ dataForm.dangerReason != '' ? dangerReasonData[dataForm.dangerReason - 1] : '请选择' }}
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="right1" v-else>
					<view :class="[dataForm.dangerReason != '' ? 'select-bg' : '']">
						{{ dataForm.dangerReason != '' ? dangerReasonData[dataForm.dangerReason - 1] : '无' }}
					</view>
				</view>
			</view>
		</view> -->
		<view class="kiss-list">
			<view class="kiss-list-title" @click="handleToBumen">
				<view class="left">
					<view class="yz" v-if="isInspec == 0">*</view>
					隐患审核部门
				</view>
				<view class="right1" v-if="isInspec == 0">
					<view :class="[dataForm.auditDeptName != '' ? 'select-bg' : 'sel']">
						{{ dataForm.auditDeptName != '' ? dataForm.auditDeptName : '请选择' }}
					</view>
					<view class="iconfont icon-app-xiangyou" style="color:#A6A6A6"></view>
				</view>
				<view class="right1" v-else>
					<view :class="[dataForm.auditDeptName != '' ? 'select-bg' : '']">
						{{ dataForm.auditDeptName != '' ? dataForm.auditDeptName : '无' }}
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-subside"></view>
		<view class="kiss-bottom-once">
			<view class="btn-right" @click="$dianji(sumbit,'onoff')">提交</view>
		</view>

		<!-- 隐患形成原因 -->
		<u-picker :show="showReason" :columns="reasonColumns" keyName="name" @confirm="onChangeReason"
			@cancel="cancelReason">
		</u-picker>

		<tki-tree ref="tkitree" :range="treeList" rangeKey="configValue" idKey="id" :selectParent="true"
			confirmColor="#0f53ac" @confirm="confirmTree" />
		<u-overlay :show="tipShow" mode="center" round="6">
			<view class="tip_box">
				<view class="title1">
					提示
				</view>
				<view class="top">
					<text>当前未配置区域，请手动输入</text>
				</view>
				<view class="btn">
					<view class="cacel_btn" @click="tipShow = false">
						知道了
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import uploadVideo from '@/components/uploadVideo/index.vue';
	import tkiTree from "../components/tki-tree/tki-tree.vue"
	export default {
		components: {
			uploadVideo,
			tkiTree
		},
		data() {
			return {
				tipShow: false,
				treeList: [],
				isInspec: 0, // 0 编辑 1 查看详情
				dataForm: {
					dangerSite: '', //隐患位置
					dangerDesc: '', //隐患描述
					dangerPhoto: '', //隐患照片
					auditDeptId: '', //审核部门id
					auditDeptName: '', //审核部门名字
				},
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				valueArr: [0, 0], // 用于判断当前滑动的是哪一列
				province: [], // 数据列表
				saveParams: {
					pictures: '',
				},
				bumenColumns: [
					[{
							label: '男',
							id: '1'
						},
						{
							label: '女',
							id: '2'
						}
					],
					[{
							label: '老',
							id: '1'
						},
						{
							label: '少',
							id: '2'
						}
					]
				],
				onoff: true,
				file: '',
				fileList1: [],
				sourceType: ['album', 'camera'],
				showReason: false,
				dangerReasonData: ['人的不安全行为', '物的不安全状态', '管理缺陷', '环境与场所', '其他'],
				reasonColumns: [
					[{
							id: 1,
							name: '人的不安全行为'
						},
						{
							id: 2,
							name: '物的不安全状态'
						},
						{
							id: 3,
							name: '管理缺陷'
						},
						{
							id: 4,
							name: '环境与场所'
						},
						{
							id: 5,
							name: '其他'
						},
					]
				],
				dangerSiteLength: 0
			};
		},
		watch: {
			'dataForm.dangerSite'(val) {
				this.dangerSiteLength = val.length
			},
		},
		onShow() {
			this.getRegionData('')
		},
		onLoad() {

			// 部门选择回调
			uni.$on('setBumen', (data) => {
				this.dataForm.auditDeptId = data.id
				this.dataForm.auditDeptName = data.deptName
			})
			
			// 单元选择回调
			uni.$on('setUnit', (data) => {
				this.dataForm.dangerSite = data.configValue
			})
		},
		methods: {
			getRegionData(k) {
				let params = {
					configType: 'risk_unit',
					keyword: k
				}
				uni.$u.http.post(`/check/pc/riskPoint/getRiskUnit`, params).then(res => {
					if (res.code == 0) {
						this.treeList = res.data
					}
				})
			},
			confirmTree(e) {
				if (e[0]) {
					this.dataForm.dangerSite = e[0].configValue
				}
			},
			leftClick() {
				let obj = this.dataForm
				let flag = false
				for (let key in obj) {
					if (obj[key] != '') {
						flag = true
					}
				}
				if (this.saveParams.pictures != '') {
					flag = true
				}
				if (flag) {
					uni.showModal({
						title: '提示',
						content: '随手拍内容未提交保存,您确定要退出？',
						confirmText: '确定',
						cancelText: '取消',
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					});
				} else {
					uni.navigateBack({
						delta: 1
					})
				}

			},

			sumbit() {
				const {
					dangerSite,
					dangerDesc,
					auditDeptId,
					auditDeptName
				} = this.dataForm

				const params = {
					dangerSite, //隐患位置
					dangerDesc, //隐患描述
					dangerPhoto: this.saveParams.pictures, //隐患照片
					auditDeptId, //审核部门id
					auditDeptName, //审核部门id
					auditStatus: 0, //需要审核
				}
				if (params.dangerSite == '') {
					uni.$u.toast("请填写隐患位置")
					return
				} else if (params.dangerPhoto == '') {
					uni.$u.toast("请上传隐患照片")
					return
				} else if (params.dangerDesc == '') {
					uni.$u.toast("请填写隐患描述")
					return
				} else if (params.auditDeptId == '') {
					uni.$u.toast("请选择审核部门")
					return
				}
				uni.$u.http.post(`/check/mobile/appSmallTake/addSmallTake`, params).then(res => {
					if (res.code == 0) {
						uni.$u.toast('提交成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			getdata(e) {
				this.pictrueList = e;
				this.fileList1 = [];
				if (this.pictrueList.length > 0) {
					this.saveParams.pictures = "";
					let arry = []
					this.pictrueList.map(item => {
						arry.push(item)
						let dd = {
							url: item
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				}
			},
			deletePicture(e) {
				this.pictrueList = e;
				this.fileList1 = [];
				this.saveParams.pictures = "";
				if (this.pictrueList.length > 0) {
					let arry = []
					this.pictrueList.map(item => {
						arry.push(item)
						let dd = {
							url: item
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				}
			},


			handleToBumen() {
				uni.navigateTo({
					url: `/pages/subPackagesA/riskIdtion/bumenTree`
				})
			},
			onChangeReason(e) {
				this.dataForm.dangerReason = e.value[0].id
				this.showReason = false
			},
			cancelReason() {
				this.showReason = false
			},

			//选择隐患位置
			handleUnit() {
				if (this.treeList.length != 0) {
					uni.navigateTo({
						url: `/pages/subPackagesA/riskIdtion/unitTree`
					})
				} else {
					this.tipShow = true
				}
				
			},
		},
	}
</script>

<style scoped lang="scss">
	.my-input {
		border-bottom: 1px solid #F5F5F5;
	
		/deep/ .u-input {
			background-color: #f2f2f2 !important;
		}
	
		.myLength {
			color: #909193;
			font-size: 12px;
			padding: 1px 4px;
		}
	}
	.bigBox {

		.title {
			padding: 32rpx;
			margin-right: 16rpx;
			word-break: break-all;
			word-wrap: break-word;
		}

		.box {
			padding: 0 20rpx;
		}

		.bx-upload {
			padding: 20rpx 30rpx;
			background: #fff;
			border-bottom: 1px solid #d6d7d9;
		}
	}

	.popup {
		height: fit-content;
		width: 100%;
		background: #fff;

		picker-view {
			width: 100%;
			height: 500rpx;
			display: relative;
		}

		.picker-btn {
			display: flex;
			height: 100upx;
			width: 100%;
			line-height: 100upx;
			background: #fff;
			font-size: 34upx;
			z-index: 1;
			border-bottom: 1rpx solid #f8f8f8;

			.left {
				flex: 1;
				color: #0076FF;
				padding-left: 40upx;
				box-sizing: border-box;
			}

			.right {
				flex: 1;
				text-align: right;
				padding-right: 40upx;
				color: #FE4533;
				box-sizing: border-box;
			}
		}

		.item {
			line-height: 100rpx;
			text-align: center;
		}
	}

	.yz {
		color: red;
	}

	.tips {
		color: #8c8c8c;
	}

	.sel {
		color: #A6A6A6;
	}

	.tip_box {
		width: 560rpx;
		padding-top: 64rpx;
		background-color: #fff;
		border-radius: 12rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.title1 {
			text-align: center;
			margin-bottom: 32rpx;
			font-size: 32rpx;
			font-weight: 500;
		}

		.top {
			font-size: 16px;
			font-weight: 400;
			padding-bottom: 64rpx;
			color: #4D4D4D;
			text-align: center;
			border-bottom: 2rpx solid #e5e5e5;
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;

			.cacel_btn {
				text-align: center;
				font-size: 34rpx;
				font-weight: 500;
				color: #0F53AC;
				width: 50%;
				height: 112rpx;
				line-height: 112rpx;
			}

		}
	}
</style>